<template>
  <div class="login">
    <div class="header">
      <div class="header-logo"></div>
    </div>

    <div class="content">
      <div class="box">
        <div class="box-left">
          <div class="left-title">
            使用说明
            <div></div>
          </div>
          <div class="left-text">1. 注册后请妥善保管好账号及密码</div>
          <div class="left-text">
            2. 登录账户后可查看个人信息，了解个人报名及招飞状态
          </div>
        </div>

        <div class="box-right">
          <div class="right-title">飞向蓝天</div>
          <div class="right-subtitle">————2024年空军招飞辅助系统</div>

          <input v-model="account" class="input" />
          <div v-if="!account && logining" class="error">请输入账号</div>
          <input v-model="password" type="password" class="input" />
          <div v-if="!password && logining" class="error">请输入密码</div>
          <div v-else-if="isError" class="error">账号或密码错误</div>

          <div class="button" @click="login">登录</div>
        </div>
      </div>
    </div>

    <div class="footer"></div>
  </div>
</template>
<script setup lang="ts">
  import { ref, watch } from 'vue'
  import { useRouter } from 'vue-router'

  const router = useRouter()

  const account = ref('')
  const password = ref('')
  const logining = ref(false)
  const isError = ref(false)

  function login() {
    logining.value = true
    if (!account.value || !password.value) return

    if (account.value !== 'admin' || password.value !== '123456') {
      isError.value = true
      return
    }

    router.push('/need')
  }

  watch([account, password], () => {
    isError.value = false
  })
</script>
<style scoped lang="scss">
  .login {
    width: 100vw;
    height: 100vh;
    background-color: rgba(128, 128, 128, 0.6);

    --bg: rgb(69, 69, 228);

    .header {
      height: 8vw;
      background-color: var(--bg);
      padding-top: 2vw;
      .header-logo {
        height: 6vw;
        background: #fff;
      }
    }

    .content {
      height: calc(100vh - 13vw);
      display: flex;
      align-items: center;
      justify-content: center;

      .box {
        background-color: #fff;
        border-radius: 2vw;
        width: 85vw;
        height: 35vw;
        display: flex;

        .box-left {
          width: 25vw;
          border-right: 1px solid rgba(128, 128, 128, 0.7);
          height: 100%;
          padding-left: 3vw;
          .left-title {
            font-size: 2vw;
            display: flex;
            align-items: center;
            padding-top: 5vw;

            div {
              flex: 1;
              border-top: 1px solid rgba(128, 128, 128, 0.7);
              margin-left: 1vw;
            }
          }

          .left-text {
            width: 15vw;
            font-size: 1.5vw;
            margin-top: 3vw;
          }
        }

        .box-right {
          flex: 1;
          padding: 0 8vw;
          padding-top: 2vw;
          display: flex;
          flex-direction: column;
          align-items: center;

          .right-title {
            text-decoration: underline;
            color: blue;
            font-size: 3vw;
            width: 100%;
          }

          .right-subtitle {
            padding-left: 8vw;
            font-size: 1.5vw;
            width: 100%;
          }

          .input {
            width: 100%;
            height: 3vw;
            display: block;
            margin-top: 3vw;
            font-size: 2vw;
          }
          .error {
            height: 0;
            font-size: 1vw;
            line-height: 2vw;
            color: red;
            width: 100%;
          }

          .button {
            width: 10vw;
            height: 4vw;
            font-size: 2vw;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            background-color: blue;
            color: #fff;
            margin-top: 5vw;
          }
        }
      }
    }

    .footer {
      height: 5vw;
      background-color: var(--bg);
    }
  }
</style>
